<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>共享</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="content">
        <div class="btn flex flex-align-items-center">
          <p class="font-14">开启共享</p>
          <el-switch v-model="form.share" />
          <el-tooltip content="设置为协作的账号可查看和操作该产品数据" placement="top" effect="dark">
            <i class="btn-tip iconfont icon-changjianwentixiangguanwenti pointer"></i>
          </el-tooltip>
        </div>
        <p class="content-title font-14">编辑协作人</p>
        <el-table :data="form.list" style="width: 100%;" class="table">
          <el-table-column prop="name" label="协作者账号" />
          <el-table-column prop="name" label="可查看" />
          <el-table-column label="操作">
            <template #default="scope">
              <div class="row-btns flex">
                <p class="row-btn font-14 pointer">操作</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';

const props = defineProps(['info']);
const emit = defineEmits(['close']);

const form = ref({
  share: false,
  list: [
    {
      name: 11111
    }
  ],
  ...props.info
});

const close = () => {
  emit('close');
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    z-index: 10;
    width: 498px;
    background: #fff;
    border-radius: 2px;

    .content {
      padding: 16px 24px;

      .btn {
        margin-bottom: 24px;

        p {
          color: #606266;
          margin-right: 16px;
        }

        .btn-tip {
          color: #33333366;
          font-size: 20px;
          margin-left: 8px;
        }
      }

      .content-title {
        color: #606266;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
